import type { Directive, DirectiveBinding } from 'vue'

/**
 * 特殊效果指令
 */
export const specialEffects: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    if (!binding.arg) return
    if (binding.arg === 'nose') {
      el.style.fontSize = '50px'
      el.style.color = '#0000'
      el.style.backgroundBlendMode = 'defference'
      el.style.mixBlendMode = 'lighten'
      el.style.backgroundClip = 'text'
      el.style.backgroundImage = `repeating-radial-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0.0001%, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0.0002%), repeating-conic-gradient(rgb(0, 0, 0) 0deg, rgb(0, 0, 0) 0.0001%, rgb(255, 255, 255) 0deg, rgb(255, 255, 255) 0.0002%);`
      el.style.backgroundPositionX = `50% 50%`
      el.style.backgroundPositionY = `0 50%`
      el.style.backgroundSize = `2500px 2500px,2500px 2500px`
    }
  }
}
